<template>
    <div ref="echart"></div>
</template>

<script>
import * as echart from 'echarts'
export default {
    //定义属性
    props:{
        isAxisChart:{
            type:Boolean,
            default:true
        },
        chartData:{
            type:Object,
            default(){
                return {
                    xData: [],
                    series: []
                }
            }
        }
    },
    //监听器，数据改变时更新图表
    watch:{
        chartData:{
            handler:function(){
                this.initChart()
            },
            deep:true
        }
    },
    methods:{
        //渲染图表
        initChart(){
            this.initChartData()
            if(this.echart){
                this.echart.setOption(this.options)
            } else {
                this.echart = echart.init(this.$refs.echart)
                this.echart.setOption(this.options)
            }
        },
        //传入数据
        initChartData(){
            if(this.isAxisChart){
                this.axisOption.xAxis.data = this.chartData.xData
                this.axisOption.series = this.chartData.series
            } else {
                this.normalOption.series = this.chartData.series
            }
        }
    },
    data(){
        return{
            //折线图或柱状图配置
            axisOption:{
            // 图例文字颜色
            legend:{
                text:""
            },
            title:{
                text:""
            },
            textStyle: {
                color: "#333",
            },
            grid: {
            left: "20%",
            },
            // 提示框
            tooltip: {
            trigger: "axis",
            },
            xAxis: {
            type: "category", // 类目轴
            data: [],
            axisLine: {
                lineStyle: {
                color: "#17b3a3",
                },
            },
            axisLabel: {
                interval: 0,
                color: "#333",
            },
            },
            yAxis: [
            {
                type: "value",
                axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                },
            },
            ],
            color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
            series: [],
            },
            //饼状图配置
            normalOption:
            {
                // title:{
                //     text:"本月销量占比"
                // },
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: [],
            },
            echart:null
        }  
    },
    computed:{
        options (){
            return this.isAxisChart ? this.axisOption : this.normalOption
        }
    }
}
</script>